23.07.14
오늘 한 일
- 오후 8시 ~ 10시 GDG 기획 회의
- 토스 면접 준비
하루 요약
- 17:00 ~ 23:00 집에서 공부
인사이트
유용한 리액트 패턴 5가지
최근에 컴파운드 컴포넌트 패턴으로 구현해보면서 어떻게 하면 더 추상화를 잘하고, 선언적으로 구현할 수 있을지 고민을 하게 되었다.
리액트는 선언형 프로그래밍이라고 한다.
선언형 프로그래밍 - 무엇을 할지 선언하는 프로그래밍
명령형 프로그래밍 - 어떻게 할지 명령하는 프로그래밍
리액트를 사용하는 개발자는 무엇을 보여주고 싶은지 선언하기만 하면 되고, 화면에 어떻게 그려야 할 지는 리액트가 알아서 해준다. (리액트 내부에 추상화가 되어있다.)
선언형 프로그래밍의 장점
- 가독성, 재사용성이 좋다.
- 무엇을 보여줄지에 집중할 수 있다.
- 결과를 예측하기 쉽다.
Algebraic Effects of React Suspense
오늘 어떤 글을 보다가 대수적 효과라는 단어가 나와서 찾아보았다. 리액트의 Suspense가 대수적 효과에 영감을 받아 만들어졌다고 한다.
"대수"란 수를 대신한다(letters representing numbers)는 뜻이다.
대수적 방식은 수학적인 문제를 해결할 때, 수들의 연산으로 해결하는게 아닌 문자와 문자들 사이의 추상적 관계(함수)로 해결하는 방식을 말한다.
대수적 효과는 무엇일까?
대수적 효과란 exception throw등을 포함하는 연산들의 집합(set of operations)으로부터 순수하지 못한 행위(impure behavior)들이 발생할 수 있다는 전제를 바탕으로 Computational Effect에 대해 접근하는 방식이다
여기서 Computational Effect는 "자신의 환경을 변경하는 모든 연산"을 포함하는 개념이다. 실용적인 관점에서 설명하면, “sub-expression”과 “central-control” 사이에서 일어나는 interaction을 의미한다.
예를 들어, 어떤 로컬 함수(sub-expression)에서 부모 환경(central-control)으로 어떤 작업을 넘겨 처리하게 하고, 처리가 끝나면, 다시 로컬 함수의 실행이 멈췄던 곳으로 돌아가 작업을 계속한다면, 여기에서는 Computational Effect가 발생한 것이다.
즉, 대수적 효과는 서로 다른 환경 사이의 interaction에서 사이드 이펙트가 발생할 수 있는데, 이걸 적절한 handler로 해결하는 접근 방식을 의미하는 것이고, 이 handler는 "sub-expression"에서 발생시킨 effect를 "central-control"에서 잡아 적절하게 처리한 뒤, 다시 "sub-expression"이 멈췄던 곳으로 흐름을 되돌려주는 것이다.
대수적 효과는 부모 컴포넌트(Suspense)와 자식 컴포넌트(UserList) 사이의 interaction에서 발생한 SideEffect(throw Promise)를 적절한 Handler(catch Promise in Suspense)를 사용해 해결하는 접근 방식을 의미하는 것이고, 이 Handler는 sub-expression(UserList)에서 발생시킨 Effect(throw Promise)를 central-control(Suspense)에서 잡아 적절하게 처리한 뒤, 다시 sub-expression(UserList)이 멈췄던 곳으로 흐름을 되돌려 주는 것이다.
이로써 Suspense는 대수적 효과를 사용해서 부모 컴포넌트에게 로딩 상태에 대한 처리의 책임을 넘겨줌으로써 메인 컴포넌트에서는 로딩 UI 표시의 책임을 분리하게 된다 -> UI 컴포넌트를 조금 더 선언적으로 작성하도록 만들어준다 -> React가 지향하는 방향과 일치하다.
근데 자바스크립트에서는 대수적 효과가 없다..
리액트 내부에서만 쓰이는 필드를 추가해서 대수적 효과를 구현했다고 한다.
Template Literal Types로 타입 안전하게 코딩하기
이렇게도 할 수 있구만.. 확실히 안전하게 타입을 지정할 수 있을 것 같다. 굿굿
React.memo() 현명하게 사용하기
나는 useCallback이나 useMemo, React.memo를 잘 안써봤다. 딱히 성능 상의 이슈를 못느껴서 그랬던 것 같다.
하지만 실무에서는 성능이 중요하기 때문에 이런 것들을 적재적소에 잘 사용해야 한다.
useMemo- hook, 함수형 컴포넌트 안에서만 사용 가능React.memo- HOC, 함수형, 클래스형 컴포넌트 모두 사용 가능
언제 사용해야 할까?
- 같은 props로 렌더링이 자주 일어나는 컴포넌트
- 무겁고 비용이 큰 연산을 하는 컴포넌트
언제 사용하지 말아야 할까?
성능상의 이점을 얻지 못한다면 사용하지 않는 것이 좋다.
- 렌더링될 때
props가 다른 경우
내일 할 일
- 토스 면접 준비